<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
    <!--工具条-->
    <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item class="table_input">
          <el-input v-model="filters.name" placeholder="根据身份证号/姓名/账号/电话号码检索"></el-input>
        </el-form-item>
        <el-form-item class="table_i">
          <el-button type="primary" v-on:click="getUsers"><i class="el-icon-search"></i></el-button>
        </el-form-item>
        <el-form-item class="table_btn_r" >
          <el-button class="table_btn_r" type="primary" @click="handleAdd">添加角色</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <div class="operation">
<!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

    </div>
    <!-- table start  -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="name" label="账号" width="120">
      </el-table-column>
      <el-table-column prop="timestamp" label="姓名">
      </el-table-column>
      <el-table-column prop="summary" label="身份证号" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="timestamp" label="邮箱">
      </el-table-column>
      <el-table-column prop="timestamp" label="电话">
      </el-table-column>
      <el-table-column prop="timestamp" label="用户所在组">
        <template slot-scope="scope">
          <span class="span_btn span_block"><i class="dot"></i><span>组1</span></span>
          <span class="span_btn span_block"><i class="dot"></i><span>组2</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="timestamp" label="角色">
      </el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
        <!--   <el-button size="mini" type="info">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button> -->
          <span class="span_btn" >关联角色</span>
          <span class="span_line">|</span>
          <span class="span_btn" >关联分组</span>
          <span class="span_line">|</span>
          <span class="span_btn" >编辑</span>
          <span class="span_line">|</span>
          <span class="span_btn span_btn_del" >删除</span>

        </template>
      </el-table-column>
    </el-table>
    <!-- table end  -->
    <!-- 新增页面 -->
     <el-dialog title="添加用户" class="form_part" :visible.sync="addFormVisible"  :close-on-click-modal="false">
      <el-form :model="addForm" label-width="83px" :rules="addFormRules" ref="addForm">
        <div class="form_left">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="addForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="sex">
            <el-radio-group v-model="addForm.sex">
              <el-radio class="radio" :label="1">男</el-radio>
              <el-radio class="radio" :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账号:" prop="account">
            <el-input v-model="addForm.account" auto-complete="off"></el-input>
          </el-form-item>
        </div>
        <div class="form_right">
          <el-form-item label="手机号:" prop="phoneNum">
            <el-input v-model="addForm.phoneNum" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" prop="email">
            <el-input v-model="addForm.email" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号:" prop="IDcard">
            <el-input v-model="addForm.IDcard" auto-complete="off"></el-input>
          </el-form-item>
        </div>
       
        
        <!-- <el-form-item label="年龄">
          <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="addForm.addr"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as role from '../api/role';

let myMixin = {
  data: function() {
    return { role }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      filters:{name:''},//搜索表单
      addFormVisible:false,//新增页面是否显示
      addForm:{sex:1},//新增页面数据
      addFormRules:{
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        IDcard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ]
      },
      addLoading:false,//
      list: [],
      canReset: true,
      loading: false
    }
  },
  methods: {
    getUsers(){
      //获取用户列表数据
    },
    //显示新增界面
    handleAdd: function () {
      // this.$router.push({path:"/add"});
     this.addFormVisible = true;
    
    },
    addSubmit:function(){
      //新增数据提交
    },
    fetchData(init) {
      this.loading = true;
      role.request.r().then((res) => {
        this.list = res.data.content;
        this.loading = false;
      });
    },
    requestNotAllowed: function(){
      role.notAllowed.r();
    }
  },
  created() {
    this.fetchData(true)
  }
}
</script>